<template>
	<view class="shop_container">
		<ABanner :isSeach="true" @searchHandle="searchHandle"></ABanner>
		<view v-if="Object.keys(machineState).length">
			<view class="vip_container">
				<view class="vip_info">
					<view class="vip_title">
						剩余权益次数为{{remainTimes}}
					</view>
					<!-- <u-icon name="question-circle"></u-icon> -->
				</view>
				<view class="vip_under">
					<view class="vip_num">
						权益次数{{remainTimes}}/{{times}}
					</view>
				<!-- 	<view class="vip_price">
						预计优惠￥3.9
					</view> -->
				</view>
			</view>

			<view class="shop_manage">
				<ul class="shop_list">
					<li>
						全部商品
					</li>
				</ul>
			</view>
			<view class="linke_select">
				<view class="right">
					<template v-if="list.length">
						<view class="shop">
							<view class="shop_item" @click="handleDetail(item)" v-for="(item,index) in list" :key="index">
								<image class="shop_img"
									:src="item.realProductImgUrl"
									mode="heightFix"></image>
								<view class="shop_info">
									<view class="shop_title">
										{{item.productName}}
									</view>
									<!-- <view class="shop_tips">
										棉柔|夜用
									</view>
									<view class="shop_desc">
										液体卫生巾进口未来感量多日用卫生巾 270mm*10片/盒
									</view> -->
									<view class="shop_price">
										<text class="price_text">￥{{item.price}}<text
												class="price_undo">￥{{parseInt(item.price)+12.90}}</text></text>
										<!-- <view class="add_icon">+</view> -->
									</view>
								</view>
							</view>
							<!-- <view class="shop_line"></view> -->
						</view>
					</template>
					<view v-else class="">
						<u-empty iconSize="60" textSize="40" width="100%" height="100%" text="商城暂无数据" mode="car"
							icon="http://cdn.uviewui.com/uview/empty/car.png">
						</u-empty>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="">
			<u-empty iconSize="60" textSize="50" width="100%" height="100%" text="商城暂无数据" mode="car"
				icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import { memberDetail, memberList } from '../../api/menber';
import {
		getShopList
	} from '@/api/index.js'
	import {
		mapGetters
	} from 'vuex'
	
	export default {
		onLoad(options) {
			if(!options.q) return
			let mid = decodeURIComponent(options.q).split("=")[1]
			this.$store.dispatch('setMachine', {mid})
		},
		onShow() {
			let vip
			memberList().then(res=>{
				vip= res.data.map(item=>{
					return item.availableEntitlements
				})
			})
			memberDetail(uni.getStorageSync('UID')).then(res=>{
				this.remainTimes=0
				this.times =0
				if(res.data.length>0){
					res.data.forEach(item=>{
						this.remainTimes+=item.remainTimes
						this.times += vip[item.type]
					})
				}else{
					this.remainTimes=0
					this.times =0
				}
			})
		},
		onReachBottom() {
			if (this.isReachBottom || !this.list.length) return;
			this.isReachBottom = true;
			this.pageParams.page += 1;
			this.getList();
		},
		computed: {
			...mapGetters(['machineState'])
		},
		data() {
			return {
				state:null,
				tapIndex: 0,
				backMachine: {},
				pageParams: {
					page: 1,
					limit: 4
				},
				list: [],
				isReachBottom: false,
				keyword: '',
				remainTimes:0,
				times:0,
			}
		},
		watch: {
			machineState: {
				deep: true,
				immediate: true,
				async handler(newVal, oldVal) {
					if (!Object.keys(newVal).length) {
						wx.showModal({
							title: '操作提示',
							content: '当前未选择机器，是否前往选择？',
							success: (res) => {
								if (res.confirm) {
									uni.switchTab({
										url: '/pages/tabBar/index'
									})
								}
							}
						})
						return
					}
					if (newVal?.mid !== oldVal?.mid) {
						this.getClear()
						setTimeout(()=>{
							this.getList();
						},100)
					}
				}
			}
		},
		methods: {
			handleDetail(item) {
				let jsonString = JSON.stringify(item)
				let encodeURIComponentStr = encodeURIComponent(jsonString)
				uni.navigateTo({
					url: `/pages/index/detail/detail?item=${encodeURIComponentStr}`
				})
			},
			getList() {
				getShopList({
					...this.pageParams,
					searchName: this.keyword,
					mId: this.$store.getters.machineState.mid
				}).then(res => {
					const {
						list,
						total
					} = res.data;

					// 更新数据
					this.list = this.list.concat(list);
					// 检查是否加载完成
					if (this.list.length >= total) {
						this.isReachBottom = true; // 没有更多数据
					} else {
						this.isReachBottom = false; // 允许继续加载
					}

					console.log(this.list)
					uni.$emit("getShop", this.list);
				}).catch(err => {
					console.error("加载失败:", err);
					this.isReachBottom = false; // 重置加载状态，允许重新加载
				});
			},
			getClear() {
				this.pageParams.page = 1
				this.isReachBottom = false
				this.list = [];
				this.keyword = ''
			},
			searchHandle(val) {
				this.getClear()
				this.keyword = val
				this.getList()
			},
			handleClick(index) {
				this.tapIndex = index
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shop_container {
		font-family: 'Helvetica Neue', Arial, sans-serif;
		min-height: 100vh;
		background-color: #f1f1f2;

		.vip_container {
			width: 91%;
			margin: -75rpx auto 20rpx auto;
			padding: 20rpx;
			background-color: #fef1f1;
			border-radius: 20rpx;

			.vip_info {

				display: flex;
				justify-content: flex-start;
				gap: 20rpx;
				font-size: 1rem;
				font-weight: bold;

				.vip_title {
					margin: 20rpx 0;
					letter-spacing: 0.125rem;
				}

				.vip_title::before {
					content: '*  ';
					color: #fc999c;
					width: 20rpx;
					height: 100%;
					line-height: 100%;

				}
			}

			.vip_under {
				display: flex;
				justify-content: space-between;
				align-items: center;
				letter-spacing: 0.09rem;
				margin: 10rpx 0;

				.vip_num {
					color: #969393;
					font-size: 0.7rem;
					text-indent: 1rem;
				}

				.vip_price {
					letter-spacing: 0.09rem;
					color: #f86e5a;
					margin-right: 20rpx;
				}
			}
		}




		.shop_manage {

			.shop_list {
				padding-left: 40rpx;
				background-color: #fff;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				li {
					margin: 30rpx 10rpx;
					padding: 4rpx 20rpx;
					font-size: 1rem;
					font-weight: bold;
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 10rpx;
				}

				li:first-child {
					// border-left: 6rpx solid #f86e59;
					color: #f86e59;
				}
			}
		}

		.linke_select {
			display: flex;
			justify-content: space-between;
			min-height: 100vh;
		}

		.linke_select .left {
			flex: 0.25;
			height: 100vh;
			position: sticky;
			top: 0;
			background-color: #ffffff;
			overflow-y: auto;
		}

		.linke_select .left_container {
			list-style: none;
			padding: 0;
			margin: 0;

			li {
				text-align: center;
				padding: 30px 0;
				font-weight: 540;
				letter-spacing: 0.125rem;
				font-size: 0.9rem;
			}

			.li_active {
				background-color: #f96d6e;
				color: #fff;
			}
		}

		.linke_select .right {
			// flex: 0.72;
			overflow-y: auto;
			width: 100%;
			// background-color: #ffffff;
			padding: 0 10rpx;
			
			.shop{
				padding: 10px 24rpx;
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-column-gap: 20rpx;
				grid-row-gap: 20rpx;
			}
			
			.shop_{
				padding: 10px 24rpx;
				display: grid;
				grid-template-columns: 1fr;
				// grid-column-gap: 20rpx;
				grid-row-gap: 20rpx;
			}
				
			.shop_item {
				display: flex;
				flex-direction: column;// TODO
				align-items: center;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;

				.shop_img {
					height: 160rpx;
					width: 200rpx;
				}

				.shop_info {
					flex: 1;

					.shop_title {
						font-size: 0.8rem;
						letter-spacing: 0.12rem;
						font-weight: bolder;
						padding: 10rpx 0;
					}

					.shop_tips {
						text-align: right;
						margin-top: -20rpx;
						font-size: 0.6rem;
						color: #c5c5c5;
						margin-right: 20rpx;
						margin: -20rpx 20rpx 20rpx 0;
						letter-spacing: 0.08rem;
					}

					.shop_desc {
						font-size: 0.65rem;
						line-height: 1.08rem;
						letter-spacing: 0.08rem;
					}

					.shop_price {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 10rpx;

						.price_text {
							color: #ff0000;
							font-size: 1.2rem;
							font-weight: bolder;

							.price_undo {
								font-size: 0.65rem;
								color: #ababab;
								text-decoration: line-through;
								margin: 0 20rpx;
							}
						}

						.add_icon {
							width: 40rpx;
							height: 40rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 50%;
							color: #f86e59;
							font-size: 1rem;
							margin-right: 30rpx;
							border: 4rpx solid #f86e59;
						}
					}
				}
			}

			.shop_line {
				height: 2rpx;
				width: 90%;
				opacity: .6;
				background-color: #ccc;
				margin: 10rpx auto;
			}
		}
	
		.cart{
			width: 100%;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			padding: 9px 40rpx;
			background-color: #fff;
			border-bottom: 1px solid #f7f7f7;
			
			image{
				width: 50rpx;
				height: 50rpx;
			}
			
			button{
				font-size: 27rpx;
				color: #fff;
				padding: 6px 56rpx;
				background-color: #f96880;
				border-radius: 60rpx;
			}
		}
	}
</style>